<template>
  <div class="sidebar" @click.stop>
    <div class="allScreenMask" v-if="open"  @click="closeMobileSidebar">

    </div>
    <div class="nav-avator" v-if="sidebar">

    </div>
    <sticky stickyTop="60">
      <div class="sidebarlist" v-for="(item, index) in routes" v-if="!item.hidden" @click.stop="changeNav(index)">
        <router-link :to="item.path" :key="item.name">
          <div class="nav-item" :class="{'nav-actived': index === actived}" v-waves>
            <!-- <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon> -->
            <i v-if="item.meta&&item.meta.icon" class="iconfont" :class="item.meta.icon"></i>
            <span v-if="item.meta&&item.meta.title">{{item.meta.title}}</span>
          </div>
        </router-link>
      </div>
    </sticky>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import bus from 'base/Bus'
import Sticky from 'base/Sticky'
export default {
  data() {
    return {
      actived: 0
    }
  },
  components: {
    Sticky
  },
  computed: {
    routes() {
      const results = this.$router.options.routes.filter(item => {
        return !item.hidden && item.children
      })
      return results[0].children
    },
    ...mapGetters([
      'device',
      'sidebar',
      'open'
    ])
  },
  mounted() {
    bus.$on('switch', () => {
      this.actived = 0
    })
    this.switchNav()
  },
  methods: {
    switchNav() {
      switch (this.$route.name) {
        case 'list':
          this.actived = 0
          break
        case 'article':
          this.actived = 0
          break
        case 'search':
          this.actived = 0
          break
        case 'archive':
          this.actived = 2
          break
        case 'sorts':
          this.actived = 3
          break
        case 'tags':
          this.actived = 4
          break
        case 'music':
          this.actived = 5
          break
        case 'link':
          this.actived = 6
          break
        case 'about':
          this.actived = 7
          break
        default:
          this.actived = 0
      }
    },
    changeNav(index) {
      this.actived = index
      if (this.sidebar) {
        this.$store.dispatch('OpenNavBar', !this.open)
      }
    },
    closeMobileSidebar() {
      if (this.sidebar && this.open) {
        this.$store.dispatch('OpenNavBar', !this.open)
      }
    }
  }
}
</script>
<style lang="scss">
.sidebar {
  .allScreenMask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 180px;
    right: 0;
    background-color: rgba(25,25,25,0.5);
  }
  .nav-avator {
    height: 100px;
    margin: 10px 40px;
    background: url('http://pb4de9kd2.bkt.clouddn.com/touxiang128.png') center;
    background-size: cover;
  }
  .sidebarlist {
    background-color: rgba(255,255,255,0.5);
    .nav-item {
      position: relative;
      height: 40px;
      line-height: 40px;
      color: #333;
      padding-left: 12px;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 40px;
        transform: scaleX(0);
        background: rgba(255,255,255,0.1);
        transition: transform .2s;
        transform-origin: 100% 0;
      }
      &:hover {
        border-left: 4px solid #1482f0;
        padding-left: 8px;
      }
      &:hover::before {
        transform: scaleX(1);
        transform-origin: 0 0;
      }
    }
  }
  .iconfont {
    font-size: 18px;
  }
  .nav-actived {
    border-left: 4px solid #1482f0;
    padding-left: 8px;
    background: rgba(255,255,255,0.1);
  }
}
</style>
